<template>
    <div class="wrapper">
        <div class="upload-wrapper">
            <div class="upload" @click="upload">添加视频</div>
            <div :id="'container'+index" v-for="(item,index) in arr" :key="index">
                <div :id="'pickfiles'+index">选择视频</div>
                <div class="info-container">
                    <input type="text" placeholder="视频名" :id="'input'+index">

                    <div class="progress-container" style="height: 30px;background-color:#ccc; ">
                        <div class="progress" style="background-color: #2089c9;height: 30px;line-height: 30px; width: 5%;color: #fff;text-align: center;">
                        	<span class="done">0</span>
                        	<span>Mb /</span>
                        	<span class="all">0</span>
                        	<span>Mb</span>
                        	<span class="speed" style="margin-left: 50px;">0</span>
                        	<span>Kb/s</span>
                            <span class="percent" style="margin-left: 50px;">0</span>%
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>


import '../../utils/jquery-1.9.1.min.js'
import '../../utils/upload.js'



function render(file, el) { // 渲染进度
    $('#' + el + ' .done').text((file.loaded / 1024 / 1024).toFixed(2))
    $('#' + el + ' .all').text((file.size / 1024 / 1024).toFixed(2))
    $('#' + el + ' .speed').text((Math.abs(file.speed) / 1024).toFixed(2))
    $('#' + el + ' .percent').text(file.percent)
    $('#' + el + ' .progress').width(file.percent + '%')
}
export default {
    data() {
        return {
            msg: 'Welcome to Your Vue.js',
            arr: [],
            path: [],
            i: 0,
            token: 'DW01eRtIbIgceRy2BnSGeqhwznk0qqPvAInVq OtM:Z0pvuYYiKyhd51ZI5ehgSOLHEcc=:eyJzY29wZSI6InZpZGVvIiwiZGVhZGxpbmUiOjE1MTE5NDY3NDh9',
            domain: 'http://qn.1sedu.com'
        }
    },
    created() {
        console.log(Qiniu,'qiuniu')
        // 获取 token
        this.utils.$get(this.utils.GET_QINIU_TOKEN,res => {
            this.token = res.data
            console.log(res.data,'获取的token')
        })
        
    },
    methods: {
        upload() {
            var that = this
            console.log('hahah')
            this.arr.push(1)// 新增一个视频
            this.$nextTick(() => {
                var options = {// 上传配置
                    token: this.token,
                    domain: this.domain,
                    el: 'container' + this.i,
                    btn: 'pickfiles' + this.i,
                    index: this.i,
                    callback: function(s, index) { // 上传成功回调函数
                        console.log(s, index)
                        var input = $('#input' + index)[0]
                        that.path.push({
                            path: s,
                            input: input
                        })
                        if (that.path.length === that.arr.length) {
                            that.$emit('done', that.path)
                        }
                    }
                }
                console.log(options,'视频信息')
                var uploader = Qiniu.uploader({
                    disable_statistics_report: false, // 禁止自动发送上传统计信息到七牛，默认允许发送
                    runtimes: 'html5,flash,html4', // 上传模式,依次退化
                    browse_button: options.btn, // 上传选择的点选按钮，**必需**
                    uptoken_func: function(file) { // 在需要获取 uptoken 时，该方法会被调用
                        return options.token;
                    },
                    filters: {
                        mime_types: [
                            { title: "Video files", extensions: "mp4" },
                        ],
                        prevent_duplicates: false //不允许选取重复文件
                    },
                    get_new_uptoken: false, // 设置上传文件的时候是否每次都重新获取新的 uptoken
                    domain: options.domain, // bucket 域名
                    container: options.el, // 上传区域 DOM ID，默认是 browser_button 的父元素，
                    max_file_size: '500mb', // 最大文件体积限制
                    flash_swf_url: 'Moxie.swf', //引入 flash,相对路径
                    max_retries: 3, // 上传失败最大重试次数
                    dragdrop: true, // 开启可拖曳上传
                    drop_element: options.el, // 拖曳上传区域元素的 ID，拖曳文件或文件夹后可触发上传
                    chunk_size: '4mb', // 分块上传时，每块的体积
                    auto_start: true, // 选择文件后自动上传，若关闭需要自己绑定事件触发上传,
                    init: {
                        'FilesAdded': function(up, files) {
                            plupload.each(files, function(file) {
                                // 文件添加进队列后,处理相关的事情
                            });
                        },
                        'BeforeUpload': function(up, file) {
                            // 每个文件上传前,处理相关的事情
                            that.$emit('uploading')
                        },
                        'UploadProgress': function(up, file) {
                            // 每个文件上传时,处理相关的事情
                            render(file, options.el)
                        },
                        'FileUploaded': function(up, file, info) {
                            console.log('是否上传成功')
                            // 每个文件上传成功后,处理相关的事情
                            var res = JSON.parse(info.response);
                            var sourceLink = options.domain + '/' + res.key;
                            options.callback(sourceLink, options.index)
                            //$('#' + el + ' .info-container').hide()
                        },
                        'Error': function(up, err, errTip) {
                            //上传出错时,处理相关的事情
                        },
                        'UploadComplete': function() {
                            //队列文件处理完毕后,处理相关的事情
                        },
                        'Key': function(up, file) {
                            // 若想在前端对每个文件的key进行个性化处理，可以配置该函数
                            // 该配置必须要在 unique_names: false , save_key: false 时才生效
                            // var key = "afsdfsdgdgdfggf";
                            // // do something with key here
                            // return key
                        }
                    }
                });
                this.i++
            })
        }
    }
}

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
@red: #f03744;

.wrapper {}

</style>
